<div id="score">
    <!-- to be done -->
    <button id="button-back">BACK</button>
    <div id="topPlayers"></div>
    <script>
        printHighscore();

        function printHighscore() {
            highScore.getTopPlayers(10);

            var highscoreContainer = $("<div></div>");
            highscoreContainer.attr("id", "highscore");

            $("#topPlayers").append(highscoreContainer);
            var topPlayers = highScore.getTopPlayers(10);

            for (var i = 0; i < topPlayers.length; i++) {
                if (i < 3) {
                    highscoreContainer.append("<h3>" + (i + 1) + ". " + topPlayers[i]["playerName"] + " " + topPlayers[i]["score"] + " points" + "</h3>");
                }
                else {
                    highscoreContainer.append("<p>" + (i + 1) + ". " + topPlayers[i]["playerName"] + " " + topPlayers[i]["score"] + " points" + "</p>");
                }
            }
        }
    </script>
</div>
<script src="../CoconutTetris/localStorageHighScore/localStorageOperations.js"></script>
<script>
    //make button back with icon
    $(function() {
        $("#button-back").button({
            icons: {
                primary: "ui-icon-circle-arrow-w"
            }
        });
    });
    $(document).ready(function () {
        // back button function
        $("#button-back").click(function() {
            if ($(this).is('#button-back')) {
                ////can't load index because it double countent still thinking how to merge it and use only one file
                $("#score").hide().load("home.html", function(response, status, xhr) {
                    if (status === "error") {
                        // handle error 
                    }
                    else
                    {
                        $(this).fadeIn();
                    }
                });
            }
        });
    });
</script>